<!-- 助农服务增加内容 -->
<template>
	<view id="body">
		<view class="order">
			<view class="title">
				<input placeholder="请输入商品标题" v-model="title" />
			</view>
			<!-- 订单类型 -->
			<view class="nav">
				<!-- 类型详细分类 -->
				<view class="type">
					<u-tabs :list="type" @click="typeclick" lineWidth="0" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle"></u-tabs>
				</view>
			</view>
			<!-- 订单内容 -->
			<view class="contnt">
				<uni-section class="mb-10" color="#00d4d4" title="商品简介" type="line" titleColor="#909399"></uni-section>
				<view class="content-input">
					<u--textarea v-model="content" placeholder="商品简介"  count="true"  maxlength=400 ></u--textarea>
				</view>
			</view>
			<!-- 商品规格 -->
			<uni-section class="mb-10" color="#00d4d4" title="商品规格" type="line" titleColor="#909399"></uni-section>
			<view class="norms-input">
				<u--textarea v-model="norms" placeholder="商品规格"  count="true"  maxlength=50 ></u--textarea>
			</view>
			<!--图片信息-->
			<uni-section class="mb-10" title="商品图片信息(最多5张)" type="line" titleColor="#909399"></uni-section>
			<view class="img-input">
				<image :src="item" v-if="item" mode="" class="imglist" v-for="(item,index) in imagesList" :key="item" @tap="ViewImage(index)" @longpress="deleteImg(index)"></image>
				<view class="box">
					<text class="t-icon t-icon-Rrl_s_114" style="width: 80rpx; height: 80rpx;margin-top: 36rpx;" @click="addImages()"></text>
				</view>
			</view>
			<!-- 价格 -->
			<uni-section class="mb-10" title="商品价格" type="line" titleColor="#909399"></uni-section>
			<view class="price">
				<view class="price-input">
						<u--input 
						placeholder="请输入价格"  
						@input="checknumber"
						type = number
						v-model="price"  
						clearable></u--input> 
					</view>
				<text style="margin-left: 20rpx;color: #3c9cff;position: relative;bottom: 13rpx;">商品单价</text>
			</view>
			<!-- 商品库存 -->
			<uni-section class="mb-10" title="商品库存" type="line" titleColor="#909399"></uni-section>
			<view class="num">
				<view class="num-input">
						<u--input 
						placeholder="请输入商品数量"  
						@input="checknumber1" 
						type = number
						v-model="num"  
						clearable></u--input> 
					</view>
				<text style="margin-left: 20rpx;color: #3c9cff;position: relative;bottom: 13rpx;">商品库存</text>
			</view>
			<!-- 发布按钮 -->
			<view class="fabubutton">
				<u-button 
					text="发             布"
					size="normal"
					type="primary"
					color="#3c9cff"
					@click="fbclick"
				></u-button>
			</view>
		</view>
	</view>
</template>
 
<script>
	import {uploadImgToOss,deleteImg} from "../static/service/aliyoss/config.js"
	import {uploadImage} from '../js_sdk/yushijie-ossutil/ossutil/uploadFile.js'
	import {http} from '../static/service/requestAddress/rtas.js'
	export default {
		data() {
			return {
				title:"",//订单标题
				ordertype:true,//订单所属类型样式控制变量
				type:[
					{
						name:"禽畜肉类",
					},
					{
						name:"粮油米面",
					},
					{
						name:"水果",
					},
					{
						name:"蔬菜",
					},
					{
						name:"水产品",
					},
					{
						name:"其他",
					},
				],//订单的分类类型
				typeflage:0,//商品类型
				weizhiflage:0,
				content:"",//订单内容
				norms:"",//商品规格
				order_index:[],//订单类型下标数组，用于发布封装订单
				imagesList:[],//图片数组
				receiveImgList: "",//上传图片返回的链接
				price:0,//价格
				num:0,//商品数量
				inactiveStyle:{ //未选中样式
					color: '#606266',
					backgroundColor: '#f0f0f0',
					fontSize: '14px',
					borderWidth: '2rpx',
					borderRadius: '40rpx',
					padding: '4rpx 8rpx',
					textAlign: 'center'
				},
				activeStyle:{ //选中样式
					color: '#ffffff',
					backgroundColor: '#3c9cff',
					fontSize: '14px',
					borderWidth: '2rpx',
					borderRadius: '40rpx',
					padding: '4rpx 8rpx',
					textAlign: 'center'
				}
			}
		},
		methods:{
			//订单类型
			typeclick(itme){
				this.typeflage = itme.index
				console.log(itme.index)
			},
			// 获取图片
			addImages() {
				var urlt 
				if(this.imagesList.length < 5){
					uni.chooseImage({
						count: 5, // 默认最多一次选择8张图
						sourceType: ['album', 'camera'], //图片来源
						success: res => {
							// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
							var tempFilePaths = res.tempFilePaths;
							//支持多图上传
							var falge = false//是否有不合法数据格式标记
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								//对上传的图片校验
								var str = tempFilePaths[i].slice(tempFilePaths[i].length - 3,tempFilePaths[i].length)
								var strhz = ["jpg","png","gif"]
								var T = strhz.indexOf(str)
								if(T == -1){
									falge = true
									continue
								}
								if(this.imagesList.length < 5){
									//显示消息提示框
									uni.showLoading({
										mask: true
									})
									this.imagesList.push(tempFilePaths[i])
								}else{
									uni.$u.toast("图片只能上传5张！")
									break
								}
							}
							setTimeout(function () {
								uni.hideLoading();
								if(falge){
									uni.$u.toast("获取成功，以过滤格式不正确图片！")
								}else{
									uni.$u.toast("图片获取成功！")
								}
							}, 500)
						}
					})
				}else{
					uni.$u.toast("图片只能上传5张！")
				}
			},
			//预览图片
			ViewImage(index) {
				uni.previewImage({
					urls: this.imagesList,
					current: index
				});
			},
			//图片长按删除
			deleteImg(index){
				var list = []
				for(var i = 0;i<this.imagesList.length;i++){
					if(index == i){
						continue
					}else{
						list.push(this.imagesList[i])
					}
				}
				this.imagesList = list
			},
			//价格输入框检查只能为数字
			checknumber(value){
				var price1 = value.toString().match(/^\d+(?:\.\d{0,2})?/) 
					this.$nextTick(() => { 
						this.price = price1 && price1[0]
				})
			},
			//库存输入框检查只能为整数
			checknumber1(){
				 let num = /^[1-9]([0-9])*$/
				 var b = num.test(this.num)
				 if(! b){
					setTimeout(() => { 
						this.num = 1  
						uni.$u.toast("库存只能是数字并且不能小于1")
					},10)
				}
			},
			async fbclick(){
				//1.发布信息检查
				var user = uni.getStorageSync('user')
				if(! user){
					uni.$u.toast("您还未登录，登录才能发布订单")
					return
				}else if (this.title == "" || this.title.length == 0 || this.title.length > 10){
					uni.$u.toast("标题不能为空，并且长度小于10")
					return
				}else if(this.content == "" || this.content.length == 0){
					uni.$u.toast("内容不能为空")
					return
				}else if(this.huadong & this.price < 1){
					uni.$u.toast("价格最少为1元")
					return
				}else if(this.imagesList.length < 1){
					uni.$u.toast("图片不能为空")
					return
				}else{
					//上传图片
					//显示消息提示框
					uni.showLoading({
						title:"正在创建中",
						mask: true
					})
					var path = "助农服务"//上传图片到oss的文件名
					this.receiveImgList = await uploadImgToOss(this.imagesList,path)
					//封装请求对象
					var postData = { 
						id:"",//订单id
						type:this.typeflage+1,//订单类型
						title:this.title,//订单标题
						content:this.content,//订单内容
						orderImg:this.receiveImgList,//订单图片
						state:0,//订单状态
						price:this.price,//订单价格
						issueUser:(JSON.parse(user)).id,//发布用户
						issueUserName:(JSON.parse(user)).name,//发布用户名
						issueUserImg:(JSON.parse(user)).img,//发布用户头像
						ordertypeid:8,//订单所属类型
						indexImg:this.receiveImgList.split(",")[0],//首页展示的订单图片
						buyusernum:0,//商品购买人数
						norms:this.norms,//商品规格
						num:this.num,//商品库存
						state:1,
					}
					 uni.request({  
						url:http+"nongsuke",
						method:"POST",
						data:postData,
						complete:(res) =>{ 
							if(res.data.code == 20011){
								uni.hideLoading()
								uni.$u.toast("订单创建成功！")
								uni.redirectTo({ 
								url:"/nongsuke/nongsukeInfo?data="+JSON.stringify(res.data.date)
								})
							}else{
								uni.hideLoading()
								uni.$u.toast("订单创建失败，请重试！")
							}
						}
					})
				}
			},
		}
	}
</script> 

<style scoped>
	@import url("../static/css/componentsCss/nongsuke/nongsukeadd.css");
	page {
		background-color: #f0f0f0;
	}
</style>